/* tags */
body
{
	--color-green  : #07b57a; 
	--color-red    : #ff3860;
	--color-blue   : #2196f3; 
	--color-black  : #222;
	--color-yellow : #ffdd57  ; 
	font-family: "helvetica neue" ,"helvetica", "arial" , sans-serif;
	padding: 0;
	margin: 0; 
}
h1,h2,h3,h4,h5,h6
{
	font-weight: 500; 
	margin:0px;
	padding:0.5em 0em; 
}
hr
{
	border:0.05em solid #ddd;
}
p
{ 
	margin: .2em 0; 
}
button{
	outline: none; 
	border:none ;
}
/*container class*/
.container
{
	max-width: 100%; 
	min-width: 300px; 
	padding: 1em 0em; 
	margin: 1em auto ; 
}

.text-container
{
	display: block;
	padding: 2em 1em ; 
	background-color: #f8f8f8; 
	width: 98%; 
	max-width: 98%; 
	border-radius: 5px; 
	margin: 0 auto ; 
	overflow: scroll;
	word-wrap: break-word;

}
.text-container *
{
	word-wrap: break-word;
}
.stacked  
{
	display: flex;
	flex-direction: column;
}
.stacked-center
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*text sizes*/
.text-small
{
	font-size: 0.9em; 
}
.text-medium
{
	font-size: 1.4em; 
}
.text-large
{
	font-size: 3em; 
}
.text-huge{
	font-size: 4em; 
}
/*text weightss*/
.text-light
{
	font-weight: 200; 
}
.text-bold
{
	font-weight: 800; 
}
/*width classes*/
.w-1
{
	width: 20%; 
}
.w-2
{
	width: 50%; 
}
.w-3
{
	width:  75% ; 
}
.w-max
{
	width: 100%; 
}
/* margin classes */
.m-1
{
	margin: 0.5em !important ; 
}
.mt-1
{
	margin-top: 0.5em !important ; 
}
.ml-1
{
	margin-left: 0.5em !important ; 
}
.mr-1
{
	margin-right: 0.5em !important; 
}
.mb-1
{
	margin-bottom: 1em !important ; 
}
.m-2
{
	margin: 1em !important; 
}
.mt-2
{
	margin-top: 1em !important ; 
}
.ml-2
{
	margin-left: 1em  !important; 
}
.mr-2
{
	margin-right: 1em !important; 
}
.mb-2
{
	margin-bottom: 1em !important ; 
}
.m-3
{
	margin: 2em !important; 
}
.mt-3
{
	margin-top: 2em !important ; 
}
.ml-3
{
	margin-left: 2em  !important; 
}
.mr-3
{
	margin-right: 2em !important; 
}
.mb-3
{
	margin-bottom: 2em !important ; 
}
/*padding classes */
.p-1
{
	padding: 0.5em !important ; 
}
.pt-1
{
	padding-top: 0.5em !important; 
}
.pl-1
{
	padding-left: 0.5em !important; 
}
.pr-1
{
	padding-right: 0.5em !important; 
}
.pb-1
{
	padding-bottom: 0.5em !important; 
}
.p-2
{
	padding: 1em !important; 
}
.pt-2
{
	padding-top: 1em !important; 
}
.pl-2
{
	padding-left: 1em !important; 
}
.pr-2
{
	padding-right: 1em !important; 
}
.pb-2
{
	padding-bottom: 1em !important; 
}
.p-3
{
	padding: 2em !important ; 
}
.pt-3
{
	padding-top: 2em !important ; 
}
.pl-3
{
	padding-left: 2em !important; 
}
.pr-3
{
	padding-right: 2em !important; 
}
.pb-1
{
	padding-bottom: 2em !important; 
}
/* centered elemet */
.center-children
{
	display: flex;
	justify-content: center;
	clear:both;
}
.center-text
{
	text-align: center !important;
}
.center
{
	margin: 0 auto; 
}
/*navigation menu */

.nav
{
	display:flex;
	background-color: #eee; 
	padding: 1.2em; 
	color:#666;
	align-items: center;
}
.nav *
{
	display: flex;  
	padding-right: 0.5em; 
	padding-left: 0.5em;
	color:#666;
}
.nav a
{
	
	text-decoration: none; 
}
.nav a:hover
{
	color:#222;	
}
.nav-brand
{
	font-size: 1.2em; 
	font-weight: 500; 
	text-align: left;  
}
.sb
{
	justify-content: space-between;
}
.sa
{
	justify-content: space-around;
}
.nav-center
{
	justify-content: center; 
}
.nav-end
{
	justify-content: flex-end ; 
	
}
.nav ul 
{
	list-style-type: none; 
	margin :0;
}
.nav li
{
	
}
.fixed-top
{
	position:fixed;
	top:0;
	width: 100%; 
	right: 2px !important; 
}
.sticky-top
{
	position:sticky;
	top:0;
}
/* light and dark backgrounds*/
.dark
{
	background-color: #2d2d2d !important ; 
	color:#fafafa !important;
}
.dark a
{
	color:#ccc ;
}
.dark a:hover
{
	color:#fff !important;
}
.light
{
	background-color:#eee ;
	color:#666; 

}
/* buttons */
.btn
{
	padding: 0.5em; 
	outline: none; 
	border:none;
	font-size: 1em; 
	border-radius: 3px;
	cursor: pointer;
	font-weight: 350; 
	letter-spacing: 1px;  
	margin:5px 0.5em;
	box-shadow: 0px 1px 3px -2px black; 
}
.btn:hover
{
	filter: brightness(95%);	
}

.btn-1
{
	color:#fff;
	background-color: #009688 ; 
}
.btn-2
{
	color:#fff;
	background-color: #07b57a; 
}
.btn-3
{
	color:#fff;
	background-color: #00c4cc ; 
}
.btn-4
{
	color:#555;
	background-color: #f6f7f8; 
	border:1px solid silver;
}
.btn-5
{
	color:#fff;
	background-color: #2a3439; 
}
.btn-6
{
	color:#fff;
	background-color: #2196f3; 
}
.btn-success
{
	color:#fff;
	background-color: #23d160; 
}
.btn-warning
{
	color:#222;
	background-color:#ffdd57;
}
.btn-danger
{
	color:#fff;
	background-color: #ff3860; 
}
.btn-small
{
	font-size: 0.9em; 
}
.btn-medium
{
	font-size: 1.1em; 
}
.btn-large
{
	font-size: 2em; 
}
/*Bagdes*/
.b-green
{
	background-color: var(--color-green);
	border-radius: 1000px; 
	color:#fff ; 
	padding: 1px 10px; 
}
.b-red
{
	border-radius: 1000px; 
	background-color:#ff3860 !important;
	color:#fff ; 
	padding: 1px 10px;  
}
.b-blue
{
	border-radius: 1000px; 
	background-color:var(--color-blue) !important;
	color:#fff ; 
	padding: 1px 10px; 
}
.b-white
{
	border-radius:1000px ; 
	background-color:#fff !important;
	color:#222 ; 
	padding: 1px 10px ; 
}
.b-black
{
	border-radius: 1000px; 
	background-color:var(--color-black) !important;
	color:#fff ; 
	padding:1px 10px; 
}
.b-yellow
{
	border-radius:1000px ; 
	background-color: var(--color-yellow) !important;
	color:#fff ; 
	padding:1px 10px; 
}
.b-silver
{
	border-radius:1000px ; 
	background-color: #ccc !important;
	color:#555 ; 
	padding: 1px 10px; 
}
/*form */
.r-form
{
	margin:1em auto ;
	border:1px solid #ddd;
	border-radius: 3px ; 
	padding: 2em; 
	width: 400px; 
	display: flex; 
	flex-direction: column;
	flex-wrap: wrap; 
	box-shadow: 0px 0px 15px -2px #eee; 
}
.r-form label
{
	display: block; 
	font-weight: 700; 
	font-size: 0.9em; 
	color:#666;
}
.r-form button
{
	width: 30%; 
}
.r-form textarea
{
	height: 100px; 
	max-height: 200px; 
	max-width: 98%; 
}
.input-text
{
	font-size: 1em; 
	border:0.05em solid #ddd;
	color:#333;
	border-radius: 3px; 
	margin-bottom: 1em ;
	margin-top: 0.3em ; 
	width: 96%;  
	padding:0.5em ;  
}
.input-checkbox
{
	padding: 1em; 
}
.input-text:focus
{
	outline: none; 
}

.tab
{
	padding: 2em 0px ; 
	border-spacing: 0; 


}
.tab th
{
	color:#444;
	font-weight: 400; 
	border:1px solid #ddd;
	padding: 1em; 
	background-color: #eee;
}

.tab td
{
	color:#666;
	padding: 1em ; 
	border:0.05em solid #ddd ;
}
/*colors*/
.c-green
{
	color:var(--color-green) !important;
}
.c-red
{
	color:var(--color-red) !important;
}
.c-blue
{
	color:var(--color-blue) !important;
}
.c-white
{
	color:#fff !important;
}
.c-black
{
	color:var(--color-black) !important;
}
.c-yellow
{
 	color:var(--color-yellow) !important;
}

/*background colors*/
.bg-green
{
	background-color:var(--color-green) !important;
}
.bg-red
{
	background-color:var(--color-red) !important;
}
.bg-blue
{
	background-color:var(--color-blue) !important;
}

.bg-white
{
	background-color:#fff !important;
}
.bg-black
{
	background-color:var(--color-black) !important;
}

.bg-yellow
{
	background-color:var(--color-yellow)!important;
}
/*shadows */
.shadow
{
	box-shadow: 0px 0px 4px 1px #ddd; 
}
.shadow-1
{
	box-shadow: 0px 0px 10px 3px #ddd; 
}
.shadow-2
{
	box-shadow: 0px 0px 27px 6px #ddd; 
}
.shadow-3
{
	box-shadow: 0px 0px 40px 10px #ddd; 
}
/* borders */
.border
{
	border:1px solid #ddd;
	border-radius: 3px; 
}
.border-1
{
	border:3px solid #ddd;
	border-radius: 3px; 
}
.border-2
{
	border:6px solid #ddd;
	border-radius: 3px; 
}
.border-3
{
	border:10px solid #ddd;
	border-radius: 3px; 
}
/*round elements*/
.rounded
{
	border-radius: 5px ; 
}
.rounded-1
{
	border-radius: 10px ; 
}
.rounded-2
{
	border-radius: 20px ; 
}
.rounded-3
{
	border-radius: 100px ; 
}
/*cards*/
.r-card{
	margin:1em 0px ; 
	display: flex ; 
	flex-direction: column;
	justify-content: space-between;
	border:1px solid silver;
	height: 300px ; 
	padding: 10px ; 
	width: 300px ; 
	border:1px solid silver;
	border-radius: 5px ; 
	overflow: scroll; 
	color : #666;
}
.r-card > img {
	border-radius: 5px ; 
}
.r-card button,
.r-card input[type="submit"]{
	cursor: pointer ; 
}
.btn-group{
	display: flex ; 
}
.card-btn{
	padding: 10px; 
}
.underlined{
	text-decoration: underline ; 
}
/*opacity*/
.opac{
	opacity: 0.75;
}
.opac-1{
	opacity: 0.5;
}
.opac-2{
	opacity: 0.25;
}
/*.foot
{
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding: 1em 0px ;  
}
.foot ul
{
	display: flex; 
	flex-direction: column;
	list-style-type: none; 
}
*/